Аттрибут | Значения | По умолчанию | Обязательный аттрибут | Класс | Описание | Примечания |
---|---|---|---|---|---|---|
data-tm-style | 'horizontal', 'vertical' | - | + | .tonyMenu | Определяет стиль меню: вертикальный, горизонтальный | - |
data-tm-breakpoint | int | 1024 | - | .tonyMenu | Брэйкпоинт мобильной версии | - |
data-tm-mobile | boolean | false | - | .tonyMenu | Активация мобильного меню | - |
data-tm-width | horizontal menu: int, 'menu-width', 'menu-outer-width', 'window-limit'vertical menu: int, 'window-limit' | 1170 | - | .tonyMenu__megamenu | Ширина окна мегаменю | - |
data-tm-align-horizontal | [horizontal menu: 'left', 'item', 'item-center', 'left-window' vertical menu: 'item' | horizontal menu: 'left' vertical menu: 'item' | - | .tonyMenu__megamenu | Горизонтальное выравнивание окна мегаменю | При парамметрах [horizontal menu: 'item', 'item-center'] игнорируются все указанные параметры аттрибута data-tm-width кроме явного указания ширины [int] |
data-tm-align-vertical | horizontal menu: 'item', 'menu-bottom' vertical menu: 'menu-top', 'item-center', 'item' | horizontal menu: 'item' vertical menu: 'menu-top' | - | .tonyMenu__megamenu | Вертикальное выравнивание окна мегаменю | - |
data-tm-animation, data-tm-animation-in, data-tm-animation-out | 'toggle', 'fade', 'emersion', 'emersion-vertical' | 'fade' | - | .tonyMenu__megamenu | Анимация появления, скрытия окна мегаменю. Можно указать как одну анимацию на появление и скрытие, так и по отдельности | При указании параметров data-tm-animation и data-tm-animation-[in, out], преймущество остаётся у параметров data-tm-animation-[in, out], при чём можно указать только [in] или только [out] |
data-tm-duration | int | 300 | - | .tonyMenu__megamenu | Длительность анимации появления, скрытия окна мегаменю | - |
data-tm-emersion-distance | int | 60 | - | .tonyMenu__megamenu | Длина движения окна мегаменю при параметрах анимации 'emersion' и 'emersion-vertical' | - |
Управление сеткой происходит добавлением класса к родителю
Схема класса сетки | Добавить к классу | Значение | Описание | Пример |
---|---|---|---|---|
.tonyMenu__col-[int]-[int]-[int] | .tonyMenu__megamenu | 0 <= int <= 12 Сумма чисел int#1+int#2+int#3 обязательно должна равняться 12 0 - выключает колонку | Основная сетка мегаменю, управляет колонками .tonyMenu__box-left, tonyMenu__box-center, tonyMenu__box-right | .tonyMenu__col-0-9-3 |
.tonyMenu__inner-col-[int] | .tonyMenu__inner-list-group, .tonyMenu__list-preview | 0 < int <= 6 | Управляет колонками мегаменю списка первого уравня | .tonyMenu__inner-col-3 |
Пример:
paddingElem [ { breakpoint: 'desctop' || 'mobile', selector: [ '.selector' ] }, ]
breakpoint - нужно выбрать на каком разрешении будет добавляться padding
selector - принимает массив строк с названиями селекторов, по которым будет происходить поиск
Событие | Описание |
---|---|
tonyMenu.initialize | Инициализация меню произведена |
tonyMenu.megamenu.change | Начало появления и скрытия мегаменю |
tonyMenu.megamenu.show.start | Перед появлением мегаменю (свойство мегаменю display: 'none';) |
tonyMenu.megamenu.show.go | Старт анимации появления мегаменю (свойство мегаменю display: 'block'; opacity: '0';) |
tonyMenu.megamenu.show.end | После окончания анимации появления мегаменю |
tonyMenu.megamenu.hide.start | Перед скрытием мегаменю |
tonyMenu.megamenu.hide.end | После окончания анимации скрытия мегаменю |
tonyMenu.mobile.show.start | Перед появлением мобильного меню |
tonyMenu.mobile.show.end | После окончания анимации появлением мобильного меню |
tonyMenu.mobile.hide.start | Перед скрытием мобильного меню |
tonyMenu.mobile.hide.end | После окончания анимаци скрытия мобильного меню |
Название класса | Описание | Куда добавляется |
---|---|---|
.tonyMenu__initialize | Добавляется после инициализации | .tonyMenu |
.tonyMenu__item-next-level | Добавляется при инициализации эллементам списка li, у которых присутствует вложенный ul | li |
.tonyMenu__megamenu-scroll | Добавляется к мегаменю если оно не влазит в экран и добавляется скрол | .tonyMenu__megamenu |
data-tm-active=[boolean] | Добавляется к каждому мегаменю при инициализации и переключается при изменении статуса активности | .tonyMenu__megamenu |
Если на странице находится больше одного меню, то к .tonyMenu добавляем любой дополнительный унакальный класс и инициализируем по нему. Одно меню - одна инициализация. (Не забываем активировать мобильное меню только лиш на одном из меню. [data-tm-mobile])
.tonyMenu() - jQuery метод инициализации плагина, возвращает обьект плагина (без обёртки jQuery, учитываем это!)
Пример:
var tonyMenu = jQuery('.tonyMenu').tonyMenu(obj); //obj - обьект парамметров tonyMenu.showTonyMenu(); //вызов методов